<div class="manage-member-box" *ngIf="tagData.data" [ngStyle]="tagData.cssStyle | styleFilter"
  [ngClass]="{'bg-image-tag': tagData.showWaterImg}">
  <ng-container *ngIf="!tagData.data.report">
    <!--服务已经结束-->
    <ng-container *ngIf="tagData.data.againOpen">
      <div class="manage-member-div3" [ngStyle]="tagData.data?.memberDivBgCssStyle|styleFilter">
        <div class="manage-top-box" [ngStyle]="tagData.data?.memberLeftBoxCssStyle|styleFilter">
          <div class="manage-top-left" [ngStyle]="tagData.data?.memberLeftIconBoxCssStyle|styleFilter">
            <div class="top-title" *ngIf="tagData.data.title" [ngStyle]="tagData.data?.msgTitleBoxCssStyle|styleFilter">
              <img *ngIf="tagData.data.title.iconName" [src]="tagData.data.title.iconName"
                onerror="this.src='assets/img/vip@3x.png'" class="top-title-icon"
                [ngStyle]="tagData.data?.titleIconCssStyle|styleFilter" />
              {{tagData.data.title?.label}}
            </div>
          </div>
          <div class="manage-top-right" [ngStyle]="tagData.data?.manageTopRightCssStyle|styleFilter">
            <!--再次开通-->
            <ng-container *ngIf="tagData.data.againOpen">
              <span *ngIf="tagData.data.againOpen" appDebounceClick (debounceClick)="gotoDetail(tagData.data.againOpen)"
                [ngStyle]="tagData.data?.againOpenBtnCssStyle|styleFilter" class="reopen-btn"><span
                  [ngStyle]="tagData.data?.reopenBtnLabelCssStyle|styleFilter"
                  class="reopen-btn-font">{{tagData.data.againOpen.label}}</span></span>
            </ng-container>
          </div>
        </div>
        <div class="manage-center-box" [ngStyle]="tagData.data?.manageCenterBoxCssStyle|styleFilter">
          <div class="manage-center-title" [ngStyle]="tagData.data?.manageCenterTitleCssStyle|styleFilter"
            *ngIf="tagData.data.info">{{tagData.data.info}}</div>
        </div>
        <div class="manage-bottom-box" [ngStyle]="tagData.data?.manageBottomBoxCssStyle|styleFilter">
          <!--评价-->
          <ng-container *ngIf="tagData.data.appraise">
            <div *ngIf="tagData.data.appraise" appDebounceClick (debounceClick)="gotoDetail(tagData.data.appraise)" class="div-appraise"
              [ngStyle]="tagData.data?.divAppraiseCssStyle|styleFilter">
              <img [src]="tagData.data?.iconDiscussIcon" class="img-transfer-icon-discuss"
                [ngStyle]="tagData.data?.iconDiscussCssStyle|styleFilter"
                onerror="this.src='assets/img/counselor/transfer_icon_discuss.png'" />
              <span class="bottom-p-gray">{{tagData.data.appraise.label}}</span>
              <img [ngStyle]="tagData.data?.arrowMoreIconCssStyle|styleFilter" [src]="tagData.data?.arrowMoreIcon"
                class="img-arrow-icon-more-gray" onerror="this.src='assets/img/arrow_icon_more_gray@3x.png'" />
            </div>
          </ng-container>

          <!--支付详情-->
          <ng-container *ngIf="tagData.data.payDetail">
            <div class="div-payDetail" *ngIf="tagData.data.payDetail" appDebounceClick (debounceClick)="gotoDetail(tagData.data.payDetail)"
              [ngStyle]="tagData.data?.divPayDetailCssStyle|styleFilter">
              <img [ngStyle]="tagData.data?.vipDetailIconCssStyle|styleFilter" [src]="tagData.data?.vipDetailIcon"
                class="img-appraise-for-payDetail" onerror="this.src='assets/img/vip_icon_details@3x1.png'" />
              <span class="bottom-p-gray"
                [ngStyle]="tagData.data?.payDetailLabelCssStyle|styleFilter">{{tagData.data.payDetail.label}}</span>
              <img [src]="tagData.data?.arrowMoreGrayIcon" class="img-arrow-icon-more-gray"
                [ngStyle]="tagData.data?.arrowMoreGrayIconCssStyle|styleFilter"
                onerror="this.src='assets/img/arrow_icon_more_gray@3x.png'" />
            </div>
          </ng-container>
        </div>
      </div>
    </ng-container>
    <!--未开通服务或者服务中-->
    <ng-container *ngIf="!tagData.data.againOpen">
      <div class="manage-member-div" [ngStyle]="tagData.data?.memberDivBgCssStyle|styleFilter">
        <div class="manage-left-box" [ngStyle]="tagData.data?.memberLeftBoxCssStyle|styleFilter">
          <div *ngIf="tagData.data.leftIcon" [ngStyle]="tagData.data?.memberLeftIconBoxCssStyle|styleFilter">
            <img [src]="tagData.data.leftIcon" [ngStyle]="tagData.data?.leftIconCssStyle|styleFilter" />
          </div>
          <div class="msg" [ngStyle]="tagData.data?.msgBoxCssStyle|styleFilter">
            <div class="msg-title" *ngIf="tagData.data.title" [ngStyle]="tagData.data?.msgTitleBoxCssStyle|styleFilter">
              <img *ngIf="tagData.data.title.iconName" [src]="tagData.data.title.iconName"
                [ngStyle]="tagData.data?.titleIconCssStyle|styleFilter"
                onerror="this.src='assets/img/vip@3x.png'" class="title-icon" />
              {{tagData.data.title?.label}}
            </div>
            <div class="msg-cener" *ngIf="tagData.data.info" [ngStyle]="tagData.data?.msgCenterCssStyle|styleFilter">
              {{tagData.data.info}}<span class="second-link-button" *ngIf="tagData.data.secondTagLabel"
                [ngStyle]="tagData.data.secondTagLabelCssStyle|styleFilter">{{tagData.data.secondTagLabel}}</span></div>
            <div class="msg-cener" *ngIf="tagData.data.info2" [ngStyle]="tagData.data?.msgCenter2CssStyle|styleFilter">
              {{tagData.data.info2}}</div>
          </div>
        </div>
        <div class="manage-right-box" [ngStyle]="tagData.data?.manageRightBoxCssStyle|styleFilter">
          <button *ngIf="tagData.data?.rightBut&&tagData.data?.rightBut?.butListLink"
            [ngClass]="{'manage-service-btn-cssType2': tagData?.cssType===2||tagData?.cssType===3,'manage-service-btn':tagData?.cssType===undefined}"
            appDebounceClick (debounceClick)="rightBut(tagData.data?.rightBut?.butListLink)" [ngStyle]="tagData.data.buttonCssStyle|styleFilter">
            {{tagData.data?.rightBut?.butListLink[0].label}}
            <img [src]="tagData.data.downArrowIcon" [ngStyle]="tagData.data.downArrowIconCssStyle|styleFilter"
              onerror="this.src='assets/img/vip_icon_down arrow@3x.png'"
              [ngClass]="{'manage-service-downdrop-cssType2': tagData?.cssType===2||tagData?.cssType===3,'manage-service-downdrop':tagData?.cssType===undefined}" /></button>
        </div>
      </div>
    </ng-container>
  </ng-container>
  <!--服务报表-->
  <ng-container *ngIf="tagData.data.report">
    <div class="manage-member-div2" [ngStyle]="tagData.data?.memberDivBgCssStyle|styleFilter">
      <div class="manage-left-box2" [ngStyle]="tagData.data?.memberLeftBoxCssStyle|styleFilter">
        <div *ngIf="tagData.data.leftIcon" [ngStyle]="tagData.data?.memberLeftIconBoxCssStyle|styleFilter">
          <img [src]="tagData.data.leftIcon" [ngStyle]="tagData.data?.leftIconCssStyle|styleFilter" />
        </div>
        <div class="msg2" [ngStyle]="tagData.data?.msgBoxCssStyle|styleFilter">
          <div class="msg2-title" *ngIf="tagData.data.title" [ngStyle]="tagData.data?.msgTitleBoxCssStyle|styleFilter">
            <img *ngIf="tagData.data.title.iconName" [src]="tagData.data.title.iconName"
              onerror="this.src='assets/img/vip@3x.png'" class="title-icon2"
              [ngStyle]="tagData.data?.titleIconCssStyle|styleFilter" />
            {{tagData.data.title?.label}}
          </div>
          <div class="msg2-cener" [ngStyle]="tagData.data?.msgCenterCssStyle|styleFilter" *ngIf="tagData.data.info">
            {{tagData.data.info}}</div>
          <div class="msg2-cener" *ngIf="tagData.data.info2" [ngStyle]="tagData.data?.msgCenter2CssStyle|styleFilter">
            {{tagData.data.info2}}</div>
          <ng-container *ngIf="tagData.data.report">
            <span *ngIf="tagData.data.report" class="report-btn" [ngStyle]="tagData.data.reportBtnCssStyle|styleFilter"
              appDebounceClick (debounceClick)="gotoDetail(tagData.data.report)">
              <img *ngIf="tagData.data.report?.iconName" src="tagData.data.report?.iconName"
                [ngStyle]="tagData.data.reportIconNameCssStyle|styleFilter"
                onerror="this.src='assets/img/vip_icon_report@3x.png'" class="report-span-img" />
              <span class="report-span-label"
                [ngStyle]="tagData.data.reportSpanLabelCssStyle|styleFilter">{{tagData.data.report.label}}</span>
            </span>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-container>

  <!--蜂喔用户2.0-->
  <div class="topRightBox" [ngStyle]="tagData.data.topRightBoxCssStyle|styleFilter">

    <img class="rightFirstIconUrl" *ngIf="tagData.data?.rightFirstIconUrl" [src]="tagData.data?.rightFirstIconUrl"
      onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_16763428685243b0c2a6da401346f20b49773e627393b.png'"
      [ngStyle]="tagData.data?.rightFirstIconUrlCssStyle|styleFilter" />

    <!--升级-->
    <span class="rightFirstSpan" *ngIf="tagData.data?.rightFirstSpan"
      [ngStyle]="tagData.data?.rightFirstSpanCssStyle|styleFilter">{{tagData.data?.rightFirstSpan}}</span>

    <!--箭头-->
    <img class="rightSecondIconUrl" *ngIf="tagData.data?.rightSecondIconUrl" [src]="tagData.data?.rightSecondIconUrl"
      onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1676343074116a94485149278864dcaec9dfaeefc868b.png'"
      [ngStyle]="tagData.data?.rightSecondIconUrlCssStyle|styleFilter" />
  </div>


  <img class="bgImgUrl" *ngIf="tagData.data?.bgImgUrl" [src]="tagData.data?.bgImgUrl"
    onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_16769461237522976e565a06bce3d01cd06f4633690a3.png'"
    [ngStyle]="tagData.data?.bgImgUrlCssStyle|styleFilter" />

</div>